<template>
    <div class="order-add pt10" >
        <template v-if="room">
        <div>
            <div  class="item bgc-fff plr20 pt13 pb18 bgc-fff mb12">
                <div class="kitbox">
                    <div class=""><img class="img" :src="room.cover" alt=""></div>
                    <div class="flex1 pl10">
                        <div class="c-000 fs-16 pt5">{{room.title}}</div>
                        <div class="c-626262 fs-13 pt10">
                            {{room.hotel_name}}
                        </div>
                        <div class="fs-13 pt10 c-f22d48">
                            押金¥{{room.deposit}}/间
                        </div>
                    </div>
                </div>
                <div class="kitbox pt30 pb20">
                    <div class="flex1 fs-18 c-2a2a2a">{{startDateStr}}<span class="fs-11 c-6c6a6e">入住</span></div>
                    <div class="fs-16 c-c9994a">共{{days}}晚</div>
                    <div class="flex1 fs-18 c-2a2a2a tr"><span class="fs-11 c-6c6a6e mr5">离开</span>{{endDateStr}}</div>
                </div>
                <div class="row bt-e3e3e3 kitbox fs-14 pt20">
                    <div>入住人姓名：</div>
                    <div class="flex1">
                        <input type='text' :value="passenger.name" @input="onInput" placeholder="请输入姓名" >
                    </div>
                </div>
                <div class="row kitbox fs-14 pt20 pb10">
                    <div>联系电话：</div>
                    <div class="flex1">
                        <input type='text' :value="passenger.mobile" @input="onMobileInput" placeholder="请输入联系电话" >
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bot-bar bgc-fff plr15">
            <div class="info fs-18">
                <span class="c-ee2f53 fs-11">押金总计</span>
                <span class="c-ee2f53 fs-16 ml5">¥{{money}}</span>
            </div>
            <div class="btn pt8" @click="submit">
                <van-button size="small" type="primary" color="#c59d5d" >立即支付</van-button>
            </div>
        </div>
        </template>
    </div>
</template>

<script>
import cardApi from "@/api/api-card";
import roomApi from "@/api/api-room";
import moment from '@/plugins/utils/moment.js'
import orderApi from "@/api/api-order";


import otherApi from "@/api/api-other";
import passengerApi from "@/api/api-passenger";
import ValidatorUtils from '@/plugins/utils/validator'
export default {
    name: "orderAdd",
    components: {

    },
    data(){
        return {
            roomId: "",
            room: undefined,
            startDate: "",
            endDate: "",
            days: "",
            startDateStr: "",
            endDateStr: "",
            // this.$store.getters.user.passenger ||
            passenger:  {},
            money: 0,
            count: 0,
            list: []
        }
    },
    mounted() {
        this.GetRoom()
        this.ListCard()
    },
    onLoad(option){   
        this.roomId = option.roomId || ""
        this.startDate = option.startDate || ""
        this.endDate = option.endDate || ""
        this.startDateStr = moment(option.startDate).format('MM月DD日')
        this.endDateStr = moment(option.endDate).format('MM月DD日')
        this.days = option.days || ""
        this.count = option.count || 0
    },
    onShow(){
        
    },
    methods: {
        GetRoom(){
            roomApi.GetRoom({
                roomId: this.roomId
            }).then(data => {
                this.money = (data.result.deposit * parseInt(this.count)).toFixed(2)
                data.result.deposit = data.result.deposit.toFixed(2)
                this.room = data.result
            })
        },

        submit(){
            var vm = this
            wx.showLoading({
                title: '提交中',
            })

            // setTimeout(function(){
            //             wx.reLaunch({
            //                 url: "/pages/index/home?active=2"
            //             })
            //             // wx.switchTab({
            //             //     url: "/pages/personal/order/index"
            //             // })
            //         }, 1000)
            //         return
            // if(!this.passenger.passengerId){
            //     wx.hideLoading({})
            //     wx.showToast({
            //         title: '请先添加入住人',
            //         icon: 'none',
            //         duration: 2000
            //     })
            //     return
            // }

            if(!ValidatorUtils.isLenRange(this.passenger.name, [1, 15])){
                wx.hideLoading({})
                this.showToast('入住人姓名长度在1到15个字符')
                return
            }
            if(!ValidatorUtils.isMobile(this.passenger.mobile)){
                this.showToast('请输入正确的联系电话')
                return
            }

            // if(!this.passenger.name){
            //     wx.hideLoading({})
            //     wx.showToast({
            //         title: '请填写入住人',
            //         icon: 'none',
            //         duration: 2000
            //     })
            //     return
            // }
            // if(!this.passenger.mobile){
            //     wx.hideLoading({})
            //     wx.showToast({
            //         title: '请填写联系电话',
            //         icon: 'none',
            //         duration: 2000
            //     })
            //     return
            // }
            orderApi.Submit({
                start_date: this.startDate,
                end_date: this.endDate,
                roomId: this.roomId,
                passengerId: this.passenger.passengerId,
                amount: this.count,
                name: this.passenger.name,
                mobile: this.passenger.mobile,
                idcard: this.passenger.idcard
            }).then(res => {
                wx.hideLoading({})
                if(res.code == 0){
                    res = res.result
                    vm.pay(res)
                } else {
                    wx.showToast({
                        title: '下单失败',
                        icon: 'none',
                        duration: 2000
                    })
                }
            }).catch(e => {
                wx.showToast({
                    title: '下单失败',
                    icon: 'none',
                    duration: 2000
                })
            })
        },
        pay(res){
            var vm = this
            wx.requestPayment({
                timeStamp: res.timeStamp,
                nonceStr: res.nonceStr,
                package: res.package,
                signType: res.signType,
                paySign: res.paySign,
                success (data) { 
                    wx.showToast({
                        title: '支付成功',
                        icon: 'success',
                        duration: 2000
                    })
                    setTimeout(function(){
                        // wx.navigateBack({
                            
                        // })
                        wx.switchTab({
                            url: "/pages/personal/order/index"
                        })
                    }, 2000)
                },
                fail (res) { 
                    wx.showToast({
                        title: '支付失败',
                        icon: 'none',
                        duration: 2000
                    })
                }
            })
        },
        ListPassenger(){
            if(this.$store.getters.user.passenger){
                return
            }
            var vm = this
            passengerApi.ListPassenger({
                pageIndex: 1,
                pageSize: 999
            }).then(res => {
                res = res.result
                if(res.List){
                    var p
                    res.List.forEach(v => {
                        if(v.is_default){
                            p = v
                        }
                    });
                    if(!p){
                        p = res.List[0] || {}
                    }
                    this.passenger = p
                }
            })
        },
        onInput(e){
            this.passenger.name = e.mp.detail.value
        },
        onMobileInput(e){
            this.passenger.mobile = e.mp.detail.value
        },
        showToast(msg, icon){
            wx.showToast({
                title: msg,
                icon: icon || "none",
                duration: 2000
            })
        },
        ListCard(){
            cardApi.ListCard({
                pageIndex: 1,
                pageSize: 999
            }).then(res => {
                res = res.result
                if(res.List && res.List.length){
                    this.passenger = res.List[0]
                }
            })
        },
    }
};
</script>
<style lang="scss" >
@import './css/add.scss';
</style>
